import React, { Component } from 'react';
import { Icon, Tag, Divider } from 'antd';
import './index.css';
import headerImg from '../../asset/images/header.jpg';
import giteeImg from '../../asset/images/gitee.png';
import sfImg from '../../asset/images/sf.png';
import csdnImg from '../../asset/images/csdn.png';

class SideBar extends Component {
  constructor() {
    super();
    this.state = {
      opend:true,
      type: 'double-left',
      sidebarClass: 'col sidebar'
    };
  }
  toggleSideBar() {
    let t = this.state.opend?'double-right':'double-left';
    let c = this.state.opend?'col sidebar hidden':'col sidebar show';
    this.setState({
      opend: !this.state.opend,
      type: t,
      sidebarClass: c
    })
  }
  render() {
    return (
      <div className={this.state.sidebarClass}>
        <div className="col">
          <img className="header-img" src={headerImg} alt="头像" />
          <span className="name">吴纯玲</span>
          <span className="slogan">立志成为一个优秀的前端工程师</span>
        </div>
        <div className="row links">
          <div className="row item">
            <img
              className="logo"
              src={giteeImg}
              alt="https://gitee.com/wuchunling"
            />
            <a
              href="https://gitee.com/wuchunling"
              target="_blank"
              rel="noreferrer noopener"
            >
              码云
            </a>
          </div>
          <div className="row item">
            <Icon className="logo" type="github" theme="filled" />
            <a
              href="https://github.com/WuChunLing"
              target="_blank"
              rel="noreferrer noopener"
            >
              github
            </a>
          </div>
          <div className="row item">
            <img
              className="logo"
              src={csdnImg}
              alt="https://blog.csdn.net/qq_30604453/"
            />
            <a
              href="https://blog.csdn.net/qq_30604453/"
              target="_blank"
              rel="noreferrer noopener"
            >
              CSDN博客
            </a>
          </div>
          <div className="row item">
            <img
              className="logo"
              src={sfImg}
              alt="https://segmentfault.com/u/qingyu_58624831012a5"
            />
            <a
              href="https://segmentfault.com/u/qingyu_58624831012a5"
              target="_blank"
              rel="noreferrer noopener"
            >
              思否
            </a>
          </div>
        </div>
        <Divider orientation="left">最近文章</Divider>
        <div className="articles">
          <ul>
            <li><a href="1">最近文章的的我的我</a></li>
            <li><a href="1">最近文章的的我的我</a></li>
            <li><a href="1">最近文章的的我的我</a></li>
            <li><a href="1">最近文章的的我的我</a></li>
            <li><a href="1">最近文章的的我的我</a></li>
          </ul>
        </div>
        <Divider orientation="left">标签</Divider>
        <div className="tags">
          <Tag className="tag" color="magenta">
            magenta
          </Tag>
          <Tag className="tag" color="red">
            red
          </Tag>
          <Tag className="tag" color="volcano">
            volcano
          </Tag>
          <Tag className="tag" color="orange">
            orange
          </Tag>
          <Tag className="tag" color="gold">
            gold
          </Tag>
          <Tag className="tag" color="lime">
            lime
          </Tag>
          <Tag className="tag" color="green">
            green
          </Tag>
          <Tag className="tag" color="cyan">
            cyan
          </Tag>
          <Tag className="tag" color="blue">
            blue
          </Tag>
          <Tag className="tag" color="geekblue">
            geekblue
          </Tag>
          <Tag className="tag" color="purple">
            purple
          </Tag>
        </div>
        <Icon type={this.state.type} onClick={this.toggleSideBar} className="hidden-sidebar"/>
      </div>
    );
  }
}
export default SideBar;
